<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
	<!-- 文本格式化属性针对文本相关操作（四种方式10个属性）
	    1.控制字体：font-family、font-size、font-weight
		2.控制文本布局：text-aglin、line-height、letter-spacing、word-spacing
		3.文本修饰效果：text-decoration、text-shadow
		4.处理文本效果：white-space
	-->
	 <style>
		/* css3语法：选择器{
			        属性: 属性值;
					属性: 属性值;
					.....
		              }
					叫法：一个样式
		*/
	   bod y div#a1{ /* 通过加权方式，锁定元素  权值：102 */
	   
		   color: #aaaa00;
		   /* 知识点1：文本格式化属性控制文字*/
		   font-family: sans-serif;
		   /* 设置多个字体：浏览器会按照顺序寻找可用字体
		    用户体验，用户系统有什么字体，优先指定字体
			通常与统配选择器使用   *{}
		   */
		  /* 知识点2：文本格式化属性控制文字
		   font-size：字体大小属性，与单位共存
		   单位  px 像素   使用特点：绝对值、pc端
		   |em 相对单位，理解：倍数
		                使用特点：相对与父元素按照倍数方式，移动端
		  */
		 /* 知识点3：文本格式化属性控制字体
		  font-weight:字体粗细属性，不存在单位
		             属性值：数值【100 200 300  ... 900】
					        常用数值：400
					        单词【400==normal、bold、light 】
		  使用方法：统配选择器搭配使用：指定全局字体正常字体粗细
		 */
		 font-weight: 400;
		 font-size: 2em;
		 /* 补充：1.英文大写， 2.首字母大写； 3.段落开始间距200px */
		 text-transform: capitalize;
		 line-height: 200px;
	   }
	   div#a1{ /* 通过加权方式，锁定元素  权值：101 */
		   color:#55aaff;
		   /* 知识点4：文本格式化属性控制文本格式【对齐、间隙】
		   text-align: 文本对齐属性
		   left|right|center|justify;两端对齐，用于弹性布局
		   */
		  text-align: justify;
		  /* 知识点5：文本格式化属性控制文本格式
		     行高属性line-height:文本垂直效果
			 使用方式：1.高度属性
			          2.在高度属性上加行高属性：属性值一致
		  */
		 border: 1px solid red;
		 height: 100px;
		 line-height: 100px;
		 /* 补充：文本对齐和行高属于对齐|间隙：字符和单词之间距离*/
		 /* 知识点6：letter-spacing:设置字符之间间隙 
		    知识点7：word-spacing:设置单词之间间隙
		 */
		letter-spacing: 1px;
		  word-spacing: 6px;
		  
	   }
	   
	   #a1{ /* 权值：100*/
		   color: #ff0000;
	   }
	   a.c1{/* 权值：11 */
	        /* 知识点8：text-decoration修饰超链接样式 
			使用方式：与通配符一起使用，设置全局页面超链接样式
			属性值：none|underline|line-through
			*/
		   text-decoration: line-through;
		   /* 知识点9：text-shadow 修饰文本阴影
		        属性值：X轴  Y轴  blur模糊距离 color
		   */
		  text-shadow: 2px 4px 2px #55aaff;
	   }
	   p{
		   border: 1px solid red;
		   /* 知识点10：文本换行效果
		     white-space：文本换行属性
			 属性值：nowrap 不换行，只显示一行，超出部分隐藏
			 |pre保存空格和回车|normal默认，空格合并，换行隐藏
		   */
		  white-space: normal;
	   }
	 </style>
	</head>
	<body>
		<!-- 需求：创建div同时指定别名，添加假文【tad】
		          id选择器，通过加权找到div，添加颜色
		-->
		<div id="a1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dolore cupiditate magnam repudiandae facere nemo eveniet possimus vitae odio, esse provident exercitationem pariatur, ratione dolores quae molestias, aperiam tenetur consequuntur.</div>
		<hr>
		<h4>文本修饰效果</h4>
		<!-- 文本修饰相关属性
		 知识点7：text-decoration属性：设置超链接效果
		 -->
		<a class="c1 c2" href="http://www.tsgzy.edu.cn">实现跳转【方式：6种】</a>
		<div style="height:800px;"></div>
		<marquee>
			<h4>处理文本效果</h4>
		</marquee>
		<p> Lo rem ip sum 
		dolor si t amet consectetur adipisicing 
		elit. Ipsam eius accus amus consequatur nihil voluptatum 
		alias enim natus qui sapiente quos? Id perferendis sed optio quisquam quae sint provident. Eum, culpa? lorem </p>
		
	</body>
</html>